.cover {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);

}

.cover::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(https://haowallpaper.com/link/common/file/getCroppingImg/8082c3f4649387a230391f98204a3d43);
    filter: blur(6rpx);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.cover::after {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1;
}


.container {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;



    .content {
        position: relative;
        border: 2rpx solid #fff;
        border-radius: 20rpx;
        overflow: hidden;
        width: 680rpx;
        margin: 0 auto;
        margin-top: -50%;
        background-color: rgba(255, 255, 255, 0.3);
        z-index: 3 !important;


        >view.hide {
            opacity: 0;
            height: 0;
        }

        .reset_password_box {
            transition: all 0.6s ease;

        }

        .reset_password_box.hide {
            height: 0;
            transform: rotateY(90deg);
        }

        .form-container {
            display: flex;
            flex-direction: column;
            opacity: 1;
            transition: all 0.8s;

            .title_photo {
                width: 200rpx;
                height: 200rpx;
                font-size: 220rpx;
                color: rgb(12, 144, 245);
                text-shadow: 0 0 8rpx rgba(0, 0, 0, 0.6);
                margin: 0 auto;
                text-align: center;
                border-radius: 100rpx;
                margin-bottom: 20rpx;
            }

            .title {
                width: 640rpx;
                height: 100rpx;
                line-height: 100rpx;
                text-align: center;
                margin: 40rpx auto;
                font-size: 40rpx;
                color: #fff;
                font-weight: 700;
                background-color: #0c90f5;
                border-radius: 20rpx;
                text-shadow: 0 0 20rpx rgba(0, 0, 0, 0.6);
                box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.6);
            }



            // 输入框
            .input-field {
                color: #fff;
                border: 2rpx solid #fff;
                margin: 20rpx auto 40rpx;
                border-radius: 40rpx;
                width: 640rpx;
                height: 80rpx;
                position: relative;

                input {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    font-size: 30rpx;
                    width: 580rpx;
                    height: 80rpx;
                    padding-left: 20rpx;
                    border-radius: 40rpx;
                }

                .input-placeholder {
                    margin-left: 20rpx;
                    color: #fff !important;
                    font-size: 30rpx;
                }

                .login_name::before {
                    display: block;
                    width: 50rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    font-size: 50rpx;
                    margin: 0 10rpx;
                    text-align: center;
                    content: "\e613";
                }

                .password::before {
                    display: block;
                    width: 50rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    font-size: 50rpx;
                    margin: 0 10rpx;
                    text-align: center;
                    content: "\e622";
                }

                .code::before {
                    display: block;
                    width: 50rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    font-size: 50rpx;
                    margin: 0 10rpx;
                    text-align: center;
                    content: "\e623";
                }

                .input_tip {
                    position: absolute;
                    color: #1aad19;
                    font-size: 25rpx;
                    top: 85rpx;
                    left: 80rpx;
                }

                .input_tip.error {
                    color: red;
                }

                // 显示密码
                .password_show {
                    position: absolute;
                    right: 15rpx;
                    top: 15rpx;
                    font-size: 50rpx;
                }

                .code_btn {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 180rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    color: #fff;

                }

            }




            .login-button {
                font-weight: 700;
                width: 640rpx;
                height: 100rpx;
                margin-top: 30rpx;
                line-height: 100rpx;
                border-radius: 50rpx;
                background-color: #fff;
                color: #1aad19;
                font-size: 35rpx;
            }

            .register-button {
                font-weight: 700;
                width: 640rpx;
                height: 80rpx;
                margin-top: 30rpx;
                line-height: 80rpx;
                border-radius: 40rpx;
                background-color: #1aad19;
                color: #fff;
                font-size: 35rpx;
            }

            .getPassword_button {
                font-weight: 700;
                width: 480rpx;
                height: 100rpx;
                margin-bottom: 40rpx;
                font-size: 40rpx;
                line-height: 100rpx;
                border-radius: 50rpx;
                background-color: #e32c7f;
                color: #1d1b1b;
            }

            .toggle {
                width: 640rpx;
                height: 80rpx;
                line-height: 80rpx;
                margin: 0 auto;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-top: 20rpx;
                color: #fff;

                .toggle-btn {
                    color: #fff;
                    outline: none;
                    padding: 0;
                    background-color: transparent;
                    margin: 0;
                }

                button::after {
                    border: none;
                }

            }

            .confirm_code {
                height: 60rpx;
                margin: 20rpx auto 5rpx;
                line-height: 60rpx;
                background-color: #e3dbdb;
                width: 640rpx;
                border-radius: 20rpx;
                text-align: center;
            }

            .confirm_code_tip {
                width: 640rpx;
                height: 40rpx;
                border-radius: 10rpx;
                margin: 0 auto 20rpx;
                line-height: 40rpx;
                text-align: center;

            }

            .success_tip {
                color: #fff;
                background-color: #1aad19;
            }

            .error_tip {
                color: #fff;
                background-color: red;
            }

            .confirm_rule {
                width: 640rpx;
                height: 80rpx;
                line-height: 40rpx;
                margin: 30rpx auto 10rpx;
                display: flex;
                flex-flow: row nowrap;

                .icon {
                    width: 40rpx;
                    height: 40rpx;
                    font-size: 40rpx;
                    margin-right: 10rpx;
                }

                .icon.success {
                    color: #1aad19;
                }
                
                .rule {
                    font-size: 29rpx;
                    color: #fff;

                    text {
                        color: red;
                    }
                }
            }
        }
    }
}